<script setup lang="ts">
import { ref } from "vue"
import { TableColumnType } from "ant-design-vue"

import {
  Button,
  RestTable,
  PaginationParams,
  ClosuredDataSource,
} from "@purchasing/components"

import api from "@/api"
import ExportButton from "@/components/ExportButton.vue"

// 查询参数
const searchParams = ref<Record<string, any>>({ keyword: "hello" })

const paginationParams = ref<PaginationParams>({ page: 1, size: 10 })
type TableColumn = TableColumnType & { description?: string }

// 表格定义
const columns: TableColumn[] = [
  {
    key: "id",
    title: "序号",
    dataIndex: "id",
    sorter: { compare: (a, b) => b.id - a.id },
  },
  { key: "property1", title: "属性1", dataIndex: "property1", sorter: true },
  { key: "property2", title: "属性2", dataIndex: "property2" },
  {
    key: "action",
    title: "操作",
    dataIndex: "action",
    description: "测试提示",
  },
]

// 取数接口
const { execute, data, isFetching, error } = api.useGetResources(
  searchParams,
  paginationParams,
)
const getResources: ClosuredDataSource = () => {
  return { execute, data, isFetching, error }
}

// 如果有服务端排序需求，绑定一下排序事件@sortChange="sortChange"
// 没有就不需要
const sortChange = (sorter: any) => {
  console.log(sorter)
  // 可以在这里处理排序传参
  execute()
}
</script>

<template>
  <div>
    <RestTable
      v-model:pagination="paginationParams"
      :columns="columns"
      :datasource="getResources"
      :scroll="{ y: '12rem' }"
      @sortChange="sortChange"
    >
      <template #operations>
        <ExportButton
          url="/resource"
          :params="searchParams"
          :columns="columns"
          size="small"
        />
        <Button size="sm">操作</Button>
      </template>
      <template #settings>
        <Button type="text">字段设置</Button>
        <Button type="text">导出设置</Button>
      </template>
      <template #bodyCell="{ column }">
        <span v-if="column.dataIndex === 'action'">
          <Button type="link">查看</Button>
        </span>
      </template>
    </RestTable>
  </div>
</template>
